<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-title">积分记录列表</view>
			<view class="nav-right">
			</view>
		</view>

		<!-- 搜索框 -->
		<view class="search-box">
			<view class="search-input-box">
				<image src="/static/search.png" mode=""></image>
				<input type="text" placeholder="搜索记录" v-model="searchKey" @input="handleSearchInput" />
			</view>
			<view class="filter-btn" @click="openFilter">
				<text>筛选</text>
			</view>
		</view>

		<!-- 记录列表 -->
		<scroll-view class="record-list" scroll-y="true" @scrolltolower="loadMore">
			<!-- 列表项 -->
			<view class="record-item" v-for="(item, index) in recordList" :index="index" :key="index">
				<view class="item-left">
					<view class="item-title">{{item.content}}</view>
					<view class="item-content">{{item.score}}积分</view>
					<view class="item-meta">
						<text class="item-date">{{item.time}}</text>	
					</view>
				</view>
				<view class="item-right" @click="delPoints(item)">删除</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import request from '@/uitls/request.js'
	export default {
		data() {
			return {
				searchKey: '',
				recordList: [],
				userId: 0
			}
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo')
			this.userId = userInfo.id
			this.getRecordList();
		},
		methods: {
			// 获取记录列表
			getRecordList() {
				const that = this


				// 模拟请求数据
				request({
					url: '/bigbase/details/list',
					method: 'GET',
					data: {
						content: this.searchKey,
						userId: this.userId,
						pageSize: 100,
						pageNum:1
						
					},
					success(res) {
						const result = res.data
						if (result.code === 200) {
							const list = result.rows;

							that.recordList = list;
							console.log(that.recordList)
						} else {
							uni.showToast({
								title: result.msg || '获取记录失败',
								icon: 'none'
							});
						}
					}
				});
			},
			delPoints(info){
				console.log(info)
				uni.showModal({
				    title: '提示',
				    content: '确定要删除这条数据吗？',
				    confirmText: '确认删除', // 自定义确认按钮文字
				    cancelText: '取消', // 自定义取消按钮文字
				    confirmColor: '#FF0000', // 确认按钮颜色
				    cancelColor: '#666666', // 取消按钮颜色
				    success: function (r) {
						if (r.confirm) {
							request({
								url: '/bigbase/details/removeInfo',
								method: 'POST',
								data: {
									id: info.id,
									time: info.time		
								},
								success(res) {
									// console.log(res.data)
									if(res.data.code==200){
										uni.showToast({
											title: res.data.msg || '删除成功',
											icon: 'success'
										});
										this.getRecordList();
									}else{
										uni.showToast({
											title: '记录时间少于一天不能删除',
											icon: 'none'
										})
									}
								}
							})	
						} else if (r.cancel) {
									// 用户点击了取消按钮
									console.log('用户点击取消');
								}
					},
					fail: function (err) {
						// 调用失败的回调函数
						console.error('showModal 调用失败：', err);
					}
				});
			},

			// 下拉刷新
			onPullDownRefresh() {
				this.getRecordList(true).then(() => {
					uni.stopPullDownRefresh();
				});
			},

			// 上拉加载更多
			loadMore() {
				if (!this.loading && this.hasMore) {
					this.getRecordList();
				}
			},

			// 处理搜索输入
			handleSearchInput() {
				// 防抖处理
				clearTimeout(this.searchTimer);
				this.searchTimer = setTimeout(() => {
					this.getRecordList(true);
				}, 300);
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.nav-bar {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #eee;

		.nav-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.nav-right {
			font-size: 30rpx;
			color: #007AFF;
		}
	}

	/* 搜索框样式 */
	.search-box {
		padding: 20rpx 30rpx;
		background-color: #fff;
		display: flex;
		gap: 20rpx;

		.search-input-box {
			flex: 1;
			height: 72rpx;
			background-color: #f5f5f5;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 24rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}

			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}
		}

		.filter-btn {
			width: 120rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background-color: #007AFF;
			color: #fff;
			border-radius: 36rpx;
			font-size: 28rpx;
		}
	}

	/* 记录列表样式 */
	.record-list {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.record-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		display: flex;
		gap: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}

		.item-left {
			flex: 1;

			.item-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.item-content {
				font-size: 28rpx;
				color: #666;
				line-height: 1.5;
				height: 84rpx;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.item-meta {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 16rpx;

				.item-date {
					font-size: 24rpx;
					color: #999;
				}

				.item-tag {
					padding: 4rpx 16rpx;
					border-radius: 16rpx;
					font-size: 24rpx;
				}

				.tag-success {
					background-color: rgba(52, 199, 89, 0.1);
					color: #34C759;
				}

				.tag-warning {
					background-color: rgba(255, 149, 0, 0.1);
					color: #FF9500;
				}

				.tag-error {
					background-color: rgba(255, 59, 48, 0.1);
					color: #FF3B30;
				}

				.tag-info {
					background-color: rgba(0, 122, 255, 0.1);
					color: #007AFF;
				}
			}
		}

		.item-right {
			color: #FF3B30;
			border-radius: 12rpx;
		}
	}

	/* 加载更多提示 */
	.loading-more,
	.no-more-data {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}

	/* 空列表提示 */
	.empty-list {
		padding-top: 200rpx;
		text-align: center;

		image {
			width: 240rpx;
			height: 240rpx;
			margin-bottom: 40rpx;
		}

		text {
			display: block;
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		button {
			width: 240rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #007AFF;
			color: #fff;
			border-radius: 40rpx;
			font-size: 28rpx;
		}
	}
</style>